<template>
  <div class="padding flex direction-column height-100">
    <div class="button-group">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <el-table
      v-loading="loading" :data="lists"
      height="100%"
      :header-cell-style="{
        backgroundColor: themeColor,
        color: 'white'
      }"
    >
      <div slot="empty" class="empty-lists">
        <svg-icon name="search"></svg-icon>
        <span class="empty-text">暂无数据</span>
      </div>
      <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
      <el-table-column label="操作" prop="id" width="200" align="center">
          <template #default="{ row }">
            <td-button icon="editor" title="编辑" @click="edit(row)"></td-button>
            <td-button icon="packaging" title="设置应用" @click="setApp(row)"></td-button>
            <td-button icon="category" title="设置菜单" @click="setMenu(row)"></td-button>
            <td-button icon="ashbin" title="删除" icon-style="color: var(--danger-color);border-color: var(--danger-color);" @click="del(row)"></td-button>
          </template>
        </el-table-column>
    </el-table>
    <operate-modal
      ref="modal" :modal-title="modalTitle" :data="modalData"
      @save-success="onSaveSuccess"
    ></operate-modal>
    <set-app-modal
      v-if="selectedRoleId"
      ref="setAppModal"
      :role-id="selectedRoleId"
      @save-success="onSaveSuccess"
    ></set-app-modal>
    <set-menu-modal
      v-if="selectedRoleId"
      ref="setMenuModal"
      :role-id="selectedRoleId"
      @save-success="onSaveSuccess"
    ></set-menu-modal>
  </div>
</template>

<script>
import TdButton from '@/components/td-button'
import OperateModal from './operate-modal'
import SetAppModal from './set-app-modal'
import SetMenuModal from './set-menu-modal'
import { queryList, del } from '@/api/sysRole'
import { confirmDel } from '@/utils'

const api = {
  queryList,
  del
}
export default {
  name: 'role-management',
  components: {
    TdButton,
    OperateModal,
    SetMenuModal,
    SetAppModal
  },
  data () {
    return {
      loading: false,
      lists: [],
      columns: [
        { label: 'ID', prop: 'id' },
        { label: '角色名称', prop: 'roleName' },
      ],
      modalTitle: '',
      modalData: {},
      selectedRoleId: ''
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    }
  },
  mounted () {
    this.getLists()
  },
  methods: {
    reload () {
      this.getLists()
    },
    getLists () {
      this.loading = true
      return api.queryList().then(res => {
        if (res.code === 200) {
          this.lists = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    add () {
      this.modalTitle = '新增角色'
      this.modalData = {}
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    edit (row) {
      this.modalTitle = '编辑角色'
      this.modalData = {
        id: row.id,
        roleName: row.roleName
      }
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    del (row) {
      confirmDel(this).then(() => {
        api.del(row.id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.reload()
          }
        })
      }).catch(() => {})
    },
    setApp (row) {
      this.selectedRoleId = row.id
      this.$nextTick(() => {
        this.$refs.setAppModal.open()
      })
    },
    setMenu (row) {
      this.selectedRoleId = row.id
      this.$nextTick(() => {
        this.$refs.setMenuModal.open()
      })
    },
    onSaveSuccess () {
      this.reload()
    }
  }
}
</script>

<style scoped>

</style>
